<template>
    <ul class="button-group">
        <li @click="sign = 0">
            <p v-if="sign==0"><img src="../../../../static/images/order-green.png" /></p>
            <p v-else><img src="../../../../static/images/order-ash.png" alt=""></p>
            <p :class="sign==0?'selectP':''">{{ dataset[0].name }}</p>
        </li>
        <li @click="sign = 1" v-if="identity!=5 && identity!=4 && identity!=6">
            <p v-if="sign==1"><img src="../../../../static/images/location-green.png" /></p>
            <p v-else><img src="../../../../static/images/location-ash.png" alt=""></p>
            <p :class="sign==1?'selectP':''">{{ dataset[1].name }}</p>
        </li>
        <li @click="sign = 1" v-if="identity==6">
            <p v-if="sign==1"><img src="../../../../static/images/wallet-green.png" /></p>
            <p v-else><img src="../../../../static/images/wallet-ash.png" alt=""></p>
            <p :class="sign==1?'selectP':''">{{ dataset[1].name }}</p>
        </li>
        <li @click="sign = 1" v-if="identity==5">
            <p v-if="sign==1"><img src="../../../../static/images/stock-manage-green.png" /></p>
            <p v-else><img src="../../../../static/images/stock-manage-ash.png" alt=""></p>
            <p :class="sign==1?'selectP':''">{{ dataset[1].name }}</p>
        </li>
         <li @click="sign = 1" v-if="identity==4">
            <p v-if="sign==1"><img src="../../../../static/images/qrcode-green.png" /></p>
            <p v-else><img src="../../../../static/images/qrcode-ash.png" alt=""></p>
            <p :class="sign==1?'selectP':''">{{ dataset[1].name }}</p>
        </li>
        <li @click="sign = 2" v-if="identity != 6 && identity != 2">
            <p v-if="sign==2"><img src="../../../../static/images/search-green.png" /></p>
            <p v-else><img src="../../../../static/images/search-ash.png" alt=""></p>
            <p :class="sign==2?'selectP':''">{{ dataset[2].name }}</p>
        </li>
        <li @click="sign = 3">
            <p v-if="sign==3"><img src="../../../../static/images/user-green.png" /></p>
            <p v-else><img src="../../../../static/images/user-ash.png" alt=""></p>
            <p :class="sign==3?'selectP':''">{{ dataset[3].name }}</p>
        </li>
    </ul>
</template>

<style lang="scss" scoped>
    .button-group {
        padding: 0.5rem 0rem;
        position: fixed;
        width: 100;
        left: 0rem;
        right: 0rem;
        bottom: 0;
        z-index: 1;
        display: flex;
        box-shadow:0 -.1rem 0 0 rgba(221,221,221,1);
        background: #ffffff;

        li {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;

            img {
                width: 20%;
                /*height: 2.5rem;*/
            }

            p {
                margin: 0rem;
                padding: 0rem;
                flex: 0 0 100%;
                text-align: center;
                font-size: 1.2rem;
                color: #999999;
            }
            .selectP{
                color: #00CC00;
            }

            p:last-child {
                margin-top: 0.2rem;
            }
        }
    }

    .fix-location {
        position: relative;
        right: -3px;
    }
</style>

<script>
    export default {
        // route => path | name, data
        props: ['dataset','index','identity'],
        data() {
            return {
                sign: 0
            }
        },
        mounted() {
            this.sign = this.index;
        },
        methods: {
            eventClickJumpToUrlPath(index) {
                if(!this.dataset[index].route) return;

                var route = this.dataset[index].route;
                if(route.path) {
                    this.$router.push({
                        path: route.path,
                        query: route.data || ''
                    }).catch(err => {});
                } else if(route.name) {
                    this.$router.push({
                        name: route.name,
                        params: route.data || ''
                    }).catch(err => {});
                }
            },
        },
        watch: {
            sign(nVal, oVal) {
                // console.log(nVal, oVal);
                this.eventClickJumpToUrlPath(nVal);
            }
        }
    }
</script>
